<template>
	<view class="container">
		<!-- 使用css画一段圆弧 -->
		<view class="pure_top"></view>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: 'cricle-background',
		data() {
			return {
			};
		},
		created() {
		},
		watch: {
		}
	}
</script>

<style lang="scss">
.container {
	width: 100%;
	height: 100%;
	position: absolute;
	background: #f8f8f8;
	z-index: -2;
	.pure_top {
		width: 100%;  
		height: 100px;  
		position: relative;  
		left: 0;
		top: 0;
		z-index: -1;  
		overflow: hidden;
		margin-bottom: -100px;
		&:after {
			content: '';
			width: 110%; 
			height: 100px;
			position: absolute;
			left: -5%;
			top: 0;
			z-index: -1;
			border-radius: 0 0 50% 50%;
			background:linear-gradient( 135deg, #FDD819 10%, #E80505 100%);
		}
	}
}

</style>
